<template>
	<uni-popup ref="ticketPopup" background-color="#fff" @change="popupChange">
		<view class="popup_content">
			<view class="box">
				<view class="close" @click="popupClose">
					<image class="image" mode="aspectFill" src="/static/home/close_border.png"></image>
				</view>
				<view class="popTop">
					<text class="text">请选择优惠券</text>
				</view>
				<view class="ticketList">
					<view class="title">
						<text v-if="couponList.length">可用优惠券({{couponList.length}}张)</text>
						<text v-else>暂无可用优惠券</text>
					</view>
					<view class="content">
						<radio-group @change="radioChange">
							<label class="ticketLabel" v-for="(item, index) in couponList" :key="item._id">
								<view>
									<rich-text v-if="item.type===1" :nodes="formatZhe(item.couponInfo.discount)" />
									<rich-text v-if="item.type===2" :nodes="formatPrice(item.couponInfo.discount,2)" />
									<view>
										<text v-if="item.type===1">{{item.couponInfo.usage_limit}}折优惠</text>
										<text v-if="item.type===2">满{{formatPrice(item.couponInfo.usage_limit)}}立减</text>
									</view>
								</view>
								<view>
									<radio :value="item._id" :checked="item._id === select_id" backgroundColor="#FFFFFF"
										borderColor="#016024" color="#016024" />
								</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="btns">
					<button size="default" type="default" class="btnDefault btnGray" hover-class="btnHover" @click="noSelect">
						暂不使用
					</button>
					<button size="default" type="default" class="btnDefault" hover-class="btnHover" @click="confirmSelect">
						确定
					</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import mixins from '@/common/mixins.js';
	export default {
		props: {},
		mixins: [mixins],
		data() {
			return {
				couponList: [],
				select_id: ""
			};
		},
		methods: {
			popupOpen(e) {
				console.log("popupOpen: ", e);
				this.couponList = e.couponList || [];
				this.$refs.ticketPopup.open("bottom");
			},
			popupClose() {
				this.$refs.ticketPopup.close();
			},
			popupChange(e) {
				this.$emit('popupChange', e);
			},
			radioChange(evt) {
				this.select_id = evt.detail.value;
			},
			noSelect() {
				this.select_id = "";
				this.$emit('noSelect');
				this.popupClose();
			},
			confirmSelect() {
				if (this.select_id) {
					let e = {};
					for (let i = 0; i < this.couponList.length; i++) {
						if (this.select_id === this.couponList[i]._id) {
							e = this.couponList[i];
						}
					}
					this.$emit('confirmSelect', e);
					this.popupClose();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		width: 100%;
		background: #fff;

		.box {
			width: 100%;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: $uni-primary;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 30rpx;
				right: 30rpx;

				>.image {
					width: 100%;
					height: 100%;
				}
			}

			.popTop {
				margin-top: 30rpx;
				width: 100%;
				height: 60rpx;
				text-align: center;

				>.text {
					font-weight: 500;
					font-size: 32rpx;
					color: $uni-base-color;
				}
			}

			.ticketList {
				padding: 0 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: column;

				>.title {
					padding: 0 30rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: $uni-main-color;
				}

				.content {
					padding: 10rpx 30rpx;
					width: calc(100% - 60rpx);
					display: flex;
					flex-direction: column;

					.ticketLabel {
						margin: 10rpx 0;
						padding: 10rpx 30rpx;
						width: calc(100% - 60rpx);
						background: linear-gradient(45deg, $xxf-gold, $xxf-red, $xxf-gold) !important;
						border-radius: 10rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						>view {
							display: flex;
							flex-direction: row;
							align-items: center;

							>rich-text {
								font-weight: 400;
								font-size: 28rpx;
								color: #fff;
							}

							>view {
								padding: 0 10rpx;

								>text {
									font-weight: 400;
									font-size: 24rpx;
									color: #c7c7c7;
								}
							}
						}
					}
				}
			}


			.btns {
				margin-top: 30rpx;
				padding: 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.btnDefault {
					width: 50%;
					height: 76rpx;
					background: $xxf-red;
					box-shadow: none;
					border-radius: 38rpx;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.btnGray {
					background: #F0F0F0;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					color: #333333 !important;
				}
			}
		}
	}
</style>